<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/common.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="title">
        Pick courses for staff    
    </ui:define>

    <ui:define name="head">
        <!--<script type="text/javascript"  src="../../res/js/jquery-1.10.2.min"></script>-->
        <!--<script type="text/javascript" src="../../res/js/jquery-ui-1.10.0.custom.js"></script>-->
        <!--<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />-->
        <!--Forces PrimeFaces to Include jquery & jquery-ui -->
        <h:outputScript name="/jquery/jquery.js" />
        <h:outputScript name="/jquery/plugins/ui/jquery-ui.custom.js" />
        <!-- Allows to use $ instead of jquery -->
        <script type="text/javascript"> $ = jQuery;</script> 
    </ui:define>

    <ui:define name="pageheader">
        Pick course
    </ui:define>

    <ui:define name="content">
        <h:form id="f1">
            <p:pickList id="pickList" value="#{staffManager.dualCourse}" var="co"  
                        itemLabel="#{co.name}" itemValue="#{co.courseId}"

                        showSourceFilter="true" >
                <p:ajax event="transfer" listener="#{staffManager.courseTransfer}" transient="false"/>  
            </p:pickList>

            <div>
                <h:commandLink value="Update" action="#{staffManager.updateCourses}" />
            </div>
        </h:form>
<!--        <button id="i1" value="cick" onclick="test();">Click me</button>-->

    </ui:define>

</ui:composition>
